<template>
  <div>
    <el-form
      :model="searchForm"
      ref="searchRef"
      :rules="rules"
      label-position="top"
    >
      <el-form-item label="设备编码" prop="deviceSn">
        <el-radio-group
          v-model="searchForm.deviceSn"
          placeholder="请选择设备编码"
          class="w-[100%] flex flex-wrap justify-between px-2 box-border"
          @change="getList()"
        >
          <el-radio
            v-for="(item, index) in props.outCodeList"
            :key="index"
            :value="item.deviceSn"
            :label="item.outCode"
            class="w-[49%] m-0 p-0"
          ></el-radio>
        </el-radio-group>
      </el-form-item>
    </el-form>

    <el-table
      :data="tableData"
      style="width: 100%; height: calc(100vh - 20rem)"
    >
      <el-table-column label="客户" prop="name" />
      <el-table-column label="客户电话" prop="phone" />
      <el-table-column label="性别">
        <template #default="{ row }">
          <div>{{ row.sex == 1 ? "男" : row.sex == 2 ? "女" : "" }}</div>
        </template>
      </el-table-column>
      <el-table-column label="年龄">
        <template #default="{ row }">
          {{ row.age == 0 ? "" : row.age }}
        </template>
      </el-table-column>
      <el-table-column label="检查时间" prop="createdAt" />
      <el-table-column label="操作" align="center" :width="150">
        <template #default="{ row }">
          <div class="data">
            <el-button
              type="primary"
              link
              @click="detail_btn(row.dataListInfo)"
              class="mb-1"
            >
              <el-icon><InfoFilled /></el-icon>详情
            </el-button>
            <el-button
              type="primary"
              @click="handleChange(row.id)"
              v-if="searchForm.id != row.id"
            >
              <el-icon><CircleCheckFilled /></el-icon>选择
            </el-button>
            <el-tag type="warning" v-else class="ml-[10px]"> 已选择 </el-tag>
          </div>
        </template>
      </el-table-column>
    </el-table>

    <PagingQuery
      :page="page"
      :size="size"
      :total="total"
      @getList="getList()"
    />

    <div class="fixed bottom-[0.8rem] right-[0.8rem] bg-[white]">
      <el-button @click="handleBack(0)">取消</el-button>
      <el-button type="primary" :loading="loading" @click="handleSubmit">
        {{ loading ? "提交中..." : "提交" }}
      </el-button>
    </div>

    <el-drawer
      v-model="detail_drawer"
      size="40%"
      title="设备检查数据详情"
      destroy-on-close
    >
      <DetailDataPoint :resultData="resultData" />
    </el-drawer>
  </div>
</template>

<script setup>
import { ref, onMounted } from "vue";
import { ElMessage, ElMessageBox } from "element-plus";
import { useUserStore } from "@/pinia";
import { storeToRefs } from "pinia";
import PagingQuery from "@/components/PagingQuery.vue";
import DetailDataPoint from "./Flow/DetailDataPoint.vue";
import { handleApiResponse } from "@/utils/request.js";
import {
  ListCustomerResultInfos,
  UpdateResultInfo,
} from "../../wailsjs/go/api/ReportApi";

onMounted(() => {
  initData();
});

const initData = async () => {
  if (props.outCodeList?.length) {
    searchForm.value.deviceSn = props.outCodeList[0].deviceSn;
    await getList();
  }
};

const userStore = useUserStore();
const { checkDetailForm } = storeToRefs(userStore);

const emit = defineEmits(["handleBack"]);
const props = defineProps({
  outCodeList: {
    type: Array,
    default: [],
  },
});

const searchRef = ref(null);
const searchForm = ref({
  id: null,
  listId: null,
  deviceSn: "",
});

const page = ref(1);
const size = ref(10);
const total = ref(0);
const tableData = ref([]);

async function getList() {
  handleApiResponse(() =>
    ListCustomerResultInfos({
      page: page.value,
      size: size.value,
      deviceSn: searchForm.value.deviceSn,
    })
  ).then((res) => {
    if (res.code == 0) {
      tableData.value = res.data.list || [];
      total.value = res.data.total || 0;
    }
  });
}

// 详情
const detail_drawer = ref(false);
const resultData = ref([]);
const detail_btn = (data) => {
  resultData.value = JSON.parse(data).filter((item) => item.isService == 1);
  detail_drawer.value = true;
};

// 选择
const handleChange = (id) => {
  searchForm.value.id = id;
};

// 提交
const loading = ref(false);
const handleSubmit = () => {
  searchRef.value.validate(async (valid) => {
    if (!valid) return ElMessage.warning("请选择设备编码");
    if (!searchForm.value.id) return ElMessage.warning("请选择一条检查数据");

    loading.value = true;
    searchForm.value.listId = checkDetailForm.value.id;

    handleApiResponse(() => UpdateResultInfo(searchForm.value)).then((res) => {
      if (res.code == 0) {
        handleBack(1);
        ElMessage.success("提交成功");
      }
      loading.value = false;
    });
  });
};

const handleBack = (val) => {
  emit("handleBack", val);
};

const rules = ref({
  deviceSn: [{ required: true, message: "请选择设备编码" }],
});
</script>

<style scoped lang="scss">
.data {
  @apply flex flex-col;
}
.data .el-button + .el-button {
  @apply ml-0;
}
</style>